<template>
  <page-frame>
    <div class="staff-main staffInfo" style="vertical-align: top">
      <div class="toptitle">
        <div class="left"><span v-model="addStaff">{{addStaff}}</span><span v-model="staffName">{{staffName}}</span>
        </div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="save('ruleForm')" v-show="btnStatus">保存</el-button>
            <!--<el-button class="lightGreenBtn" v-show="!editStatus" @click="edit">编辑</el-button>-->
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <!--基本信息-->
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="100">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="10" v-show="jobNumberStatus">
                <el-form-item label="工号">
                  <el-input v-model="ruleForm.emNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10" :offset="!jobNumberStatus?12:0">
                <el-upload
                  :disabled="!btnStatus"
                  class="avatar-uploader"
                  :action="apiUrl+'/common/annex/?access_token='+token"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="annexPic.url" :src="annexPic.url" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="员工姓名" prop="emName">
                  <el-input v-model="ruleForm.emName" placeholder="请输入员工姓名" :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10"></el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="ruleForm.gender">
                    <el-radio :disabled="inputStatus" class="radio" :label="0">男</el-radio>
                    <el-radio :disabled="inputStatus" class="radio" :label="1">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10"></el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="身份证号" prop="caedno">
                  <el-input v-model="ruleForm.caedno" placeholder="请输入身份证号" :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker
                    v-model="ruleForm.birthday"
                    type="date"
                    :disabled="inputStatus"
                    placeholder="选择出生日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="请输入手机号" :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10">
                <el-form-item label="员工状态" prop="status">
                  <el-select v-model="ruleForm.status" placeholder="请选择员工状态" :disabled="inputStatus">
                    <el-option
                      v-for="item in statusList"
                      :label="item.statusName"
                      :disabled="inputStatus"
                      :value="item.statusId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="入职日期" prop="hiredate">
                  <el-date-picker
                    v-model="ruleForm.hiredate"
                    type="date"
                    :disabled="inputStatus"
                    placeholder="选择入职日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10">
                <el-form-item label="合同截止日期" prop="contractdate">
                  <el-date-picker
                    v-model="ruleForm.contractdate"
                    type="date"
                    :disabled="inputStatus"
                    placeholder="选择合同截止日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <!--<el-form-item label="入职部门" prop="dept">-->
                <!--<el-input v-model="ruleForm.dept" :disabled="inputStatus" placeholder="选择入职部门"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="部门" prop="deptId">
                  <el-select v-model="ruleForm.deptId" placeholder="请选择部门" :disabled="inputStatus">
                    <el-option
                      v-for="item in allDept"
                      :label="item.dept"
                      :value="item.deptId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10">
                <el-form-item label="职务" prop="roleId">
                  <el-select v-model="ruleForm.roleId" placeholder="请选择职务" :disabled="inputStatus">
                    <el-option
                      v-for="item in roleList"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="员工类型" prop="type">
                  <el-select v-model="ruleForm.type" placeholder="请选择员工类型" :disabled="inputStatus">
                    <el-option
                      v-for="item in typeList"
                      :label="item.typeName"
                      :value="item.typeId">
                      {{item.typeName}}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10">
                <el-form-item label="备注">
                  <el-input v-model="ruleForm.remark" placeholder="如需备注请再次输入" :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--其他-->
        <div class="panel">
          <div class="panel-title">其他</div>
          <div class="panel-content">
            <el-row>
              <el-col :span="16">
                <el-form-item label="居住地址" prop="addressLive">
                  <el-input style="width:100%!important;" placeholder="请输入员工居住地址" v-model="ruleForm.addressLive"
                            :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="户籍地址" prop="addressPermanent">
                  <el-input style="width:100%!important;" placeholder="请输入员工户籍地址" v-model="ruleForm.addressPermanent"
                            :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="籍贯" prop="nativePlace">
                  <el-input v-model="ruleForm.nativePlace" placeholder="请输入员工籍贯" :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10">
                <el-form-item label="民族" prop="nation">
                  <el-input v-model="ruleForm.nation" placeholder="请输入员工民族" :disabled="inputStatus"></el-input>
                  <!--<el-select v-model="ruleForm.nation" placeholder="请选择民族" :disabled="inputStatus">-->
                  <!--<el-option-->
                  <!--v-for="item in nationList"-->
                  <!--:label="item.nationName"-->
                  <!--:value="item.nationID">-->
                  <!--{{item.nationName}}-->
                  <!--</el-option>-->
                  <!--</el-select>-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="政治面貌">
                  <el-select v-model="ruleForm.politics" placeholder="请选择政治面貌" :disabled="inputStatus">
                    <el-option
                      v-for="item in politicsList"
                      :label="item.politicsName"
                      :value="item.politicsID">
                      {{item.politicsName}}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10">
                <el-form-item label="宗教信仰">
                  <el-input v-model="ruleForm.faith" placeholder="请输入员工宗教信仰" :disabled="inputStatus"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="婚姻状况">
                  <el-select v-model="ruleForm.marriage" placeholder="请选择婚姻状况" :disabled="inputStatus">
                    <el-option
                      v-for="item in marriageList"
                      :label="item.marriageName"
                      :value="item.marriageID">
                      {{item.marriageName}}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3"></el-col>
              <el-col :span="10">
                <el-form-item label="文化程度">
                  <el-select v-model="ruleForm.education" placeholder="请选择文化程度" :disabled="inputStatus">
                    <el-option
                      v-for="item in educationList"
                      :label="item.educationName"
                      :value="item.educationID">
                      {{item.educationName}}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
  </page-frame>
</template>


<script>
  import staffApi from '../../service/corporation/staffApi';
  import roleApi from '../../service/corporation/roleApi';
  import commonJs from '../../config/common';
  import {apiUrl} from '../../config/env';

  export default {
    methods: {
      init() {
        this.token = window.sessionStorage.getItem("access_token");
        this.loadTableData();
        this.getRoleList();
        this.getAllDept();
      },
      /**
       * 获取所有部门
       **/
      getAllDept() {
        let self = this;
        staffApi.getAllDept().then(function (response) {
          self.allDept = response.data.data;
        })
      },
      /**
       * 加载表格数据
       */
      loadTableData() {
        let self = this;
        if (self.$route.params.way == 0) {//详情
          self.editStatus = true;
          self.btnStatus = false;
          self.jobNumberStatus = true;
          self.addStaff = "员工详情-";
        } else if (self.$route.params.way == 1) {//新增
          self.editStatus = false;
          self.btnStatus = true;
          self.addStaff = "新增员工"
        } else if (self.$route.params.way == 2) {//编辑
          self.editStatus = false;
          self.btnStatus = true;
          self.jobNumberStatus = true;
          self.addStaff = "编辑员工-";
          self.staffName = self.ruleForm.emName;
        }

        if (self.$route.params.way == 0) {
          self.getDetailInfo(self.$route.params.empId);
          self.inputStatus = true;
        } else if (self.$route.params.way == 2) {
          self.getDetailInfo(self.$route.params.empId);
        }
      },
      /**
       * 获取职务列表
       */
      getRoleList() {
        let self = this;
        roleApi.getRoleList().then(
          (response) => {
            self.roleList = response.body.data;
          },
          (response) => {
          }
        );
      },
      /**
       * 员工详情页面加载
       */
      getDetailInfo(empId) {
        let self = this;
        staffApi.getEmpByEmpId(empId).then(
          (response) => {
            self.ruleForm = response.data.data;
            self.annexPic.url = self.ruleForm.photoUrl;
            self.annexPic.annexId = self.ruleForm.annexId;
            self.oldAnnexId = self.ruleForm.annexId;
            //后台传的时间只截取日期
            self.ruleForm.birthday = new Date(response.data.data.birthday);
            self.ruleForm.hiredate = new Date(response.data.data.hiredate);
            self.ruleForm.contractdate = new Date(response.data.data.contractdate);
            self.staffName = response.data.data.emName;
          }
        );
      },
      /**
       * 编辑 部分按钮不显示
       */
      edit() {
        this.editStatus = false;
        this.btnStatus = true;
      },
      /**
       * 提交表单
       */
      save(formName) {
        let self = this;
        self.ruleForm.oldAnnexId = self.oldAnnexId;
        if (self.annexPic.annexId == self.oldAnnexId) {
          self.ruleForm.annexId = 0;
        } else {
          self.ruleForm.annexId = self.annexPic.annexId;
        }
        ;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (self.$route.params.way == 1) { //增加员工
              staffApi.insertEmp(self.ruleForm).then(
                (response) => {
                  if (response.data.status == 200) {
                    this.$message({
                      type: 'success',
                      message: '增加员工成功'
                    });
                    this.$router.push({name: "staff"});
                  } else if (response.data.data.msg == "手机号码已经存在，添加失败") {
                    this.$message({
                      type: 'error',
                      message: '手机号码已经存在，添加失败'
                    });
                  } else {
                    this.$message({
                      type: 'error',
                      message: '添加员工失败'
                    });
                  }
                });
//                },(response)=>{
//                  if(response.data.msg=="手机号码已经存在，添加失败") {
//                    this.$message({
//                      type: 'error',
//                      message: '添加员工失败'
//                    });
//                  } else {
//                    this.$message({
//                      type: 'error',
//                      message: '添加员工失败'
//                    });
//                  }
//                }
//              );
            } else if (self.$route.params.way == 2) {//编辑员工
              staffApi.updateEmpByEmpId(self.$route.params.empId, self.ruleForm).then(
                (response) => {
                  if (response.data.status == 200) {
                    this.$message({
                      type: 'success',
                      message: '编辑员工成功'
                    });
                    this.$router.push({name: "staff"});
                  } else {
                    if (response.data.data.msg == "手机号码已经存在，编辑失败") {
                      this.$message({
                        type: 'error',
                        message: '手机号码已经存在，编辑失败'
                      });
                    } else {
                      this.$message({
                        type: 'error',
                        message: '编辑员工失败'
                      });
                    }
                  }
                },
              );
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 返回上一级
       */
      back() {
        this.$router.push({name: 'staff', params: {no: 5}});
      },
      /**
       * 头像相关
       */
      handleAvatarSuccess(file) {
        this.annexPic.annexId = file.data.annexId;
        this.annexPic.url = file.data.url + '?access_token=' + this.token;
      },
      /**
       * 头像上传前判断
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        apiUrl,
        token: "",
        inputStatus: false,
        editStatus: false,
        btnStatus: false,
        jobNumberStatus: false,
        addStaff: '',
        staffName: "",
        imageUrl: '',
        oldAnnexId: 0,
        annexPic: {
          "annexId": 0,
          "url": ""
        },
        allDept: [],
        typeList: [{
          typeName: "正式",
          typeId: 1
        }, {
          typeName: "外包",
          typeId: 2
        }, {
          typeName: "其他",
          typeId: 3
        }],
        statusList: [{
          statusName: '在职',
          statusId: 0,
        }, {
          statusName: '离职',
          statusId: 1,
        }],
        roleList: [],
        nationList: [{
          nationName: '汉族',
          nationID: 1,
        }, {
          nationName: '其他',
          nationID: 0,
        }],
        politicsList: [{
          politicsName: '中共党员',
          politicsID: 1
        }, {
          politicsName: '共青团员',
          politicsID: 2
        }, {
          politicsName: '群众',
          politicsID: 3
        }, {
          politicsName: '其他党派',
          politicsID: 4
        }],
        marriageList: [{
          marriageName: '未婚',
          marriageID: 1,
        }, {
          marriageName: '已婚',
          marriageID: 2,
        }, {
          marriageName: '离异',
          marriageID: 3,
        }, {
          marriageName: '丧偶',
          marriageID: 4,
        }, {
          marriageName: '其他',
          marriageID: 5,
        }],
        faithList: [{
          faithName: '佛教',
          faithID: 1,
        }],
        educationList: [{
          educationName: '博士',
          educationID: 1
        }, {
          educationName: '硕士',
          educationID: 2
        }, {
          educationName: '本科',
          educationID: 3
        }, {
          educationName: '大专',
          educationID: 4
        }, {
          educationName: '中专和中技',
          educationID: 5
        }, {
          educationName: '技工学校',
          educationID: 6
        }, {
          educationName: '高中',
          educationID: 7
        }, {
          educationName: '初中',
          educationID: 8
        }, {
          educationName: '小学',
          educationID: 9
        }, {
          educationName: '文盲与半文盲',
          educationID: 10
        }],
        ruleForm: {
          annexId: null,
          url: "",
          emNo: '',
          emName: '',
          addressLive: '',
          addressPermanent: '',
          birthday: '',
          caedno: '',
          contractdate: '',
          deptId: null,
          education: null,
          faith: null,
          gender: "",
          hiredate: '',
          marriage: null,
          nation: null,
          nativePlace: '',
          phone: '',
          politics: null,
          remark: '',
          roleId: null,
          status: 0,
          type: null,
        },
        rules: {
          emName: [
            {required: true, message: '请输入员工姓名', trigger: 'blur'},
          ],
          gender: [
            {required: true, type: 'number', message: '请选择性别', trigger: 'change'}
          ],
          birthday: [
            {type: 'date', required: true, message: '请选择出生日期', trigger: 'change'},
          ],
          caedno: [
            {required: true, validator: commonJs.validateCardno, trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
          ],
          status: [
            {required: true, type: 'number', message: '请选择员工状态', trigger: 'blur'},
          ],
          hiredate: [
            {type: 'date', required: true, message: '请选择入职日期', trigger: 'change'},
          ],
          contractdate: [
            {type: 'date', required: true, message: '请选择合同截止日期', trigger: 'change'},
          ],
          deptId: [
            {type: 'number', required: true, message: '请输入员工入职部门', trigger: 'blur'},
          ],
          roleId: [
            {required: true, type: 'number', message: '请选择员工职务', trigger: 'change'},
          ],
          type: [
            {required: true, type: 'number', message: '请选择员工类型', trigger: 'change'},
          ],

          addressLive: [
            {required: true, message: '请输入居住地址', trigger: 'blur'},
          ],
//          addressPermanent:[
//            { required: true, message: '请输入户籍地址', trigger: 'blur' },
//          ],
//          nativePlace:[
//            { required: true, message: '请输入籍贯', trigger: 'blur' },
//          ],
//          nation:[
//            { required: true,message: '请输入民族', trigger: 'blur' },
//          ],
        },
      }
    }
  }
</script>
<style>
  .el-tabs__item {
    font-weight: bolder;
    font-size: 16px;
  }

  .staffInfo .el-form {
    /*width:90%;*/
    /*margin: 0 auto;*/
  }

  .el-col-10 {
    position: relative;
  }

  .staff-main .btns {
    float: right;
  }

  .el-input {
    width: 80%;
  }

  .input input {
    display: inline-block;
  }

  .el-icon-caret-top:before {
    content: "\E607" !important;
  }

  .el-select {
    display: block;
    position: relative;
  }

  .el-select .el-input .el-input__icon {
    top: 50% !important;
  }

  .staff-main .panel-content .el-col-3 {
    height: 1px;
  }

  .avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    top: -10px;
    left: 180px;
    z-index: 5;
    height: 234px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 234px;
    line-height: 234px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 234px;
    display: block;
  }

</style>
